<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黑马管理系统</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="div">
    <b style="padding-left:4px;color: red; font-size: 30px;">黑马程序员-员工列表</b>
    <div style="float: right;">
        <el-button type="primary" @click="showsaveUser">添加员工</el-button>
    </div>
    <hr>
    <!--表格-->
    <el-table :data="tableData">
        <el-table-column width="80"></el-table-column>
        <el-table-column prop="id" label="工号" width="260"></el-table-column>
        <el-table-column prop="username" label="姓名" width="260"></el-table-column>
        <el-table-column prop="remark" label="评价" width="260"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column label="操作" width="180">
            <template slot-scope="props">
                <el-button type="warning" @click="showEditUser(props.row)">编辑</el-button>
                <el-button type="danger" @click="deleteUser(props.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--
        分页组件
          @size-change： 当改变每页条数时触发的函数
          @current-change：当改变页码时触发的函数
          current-page ：默认的页码
          :page-sizes：每页条数选择框中显示的值
          :page-size : 默认的每页条数
          layout： 分页组件的布局
              total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
          :total: 总条数
    -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[3,5,8]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>

    <el-dialog title="添加员工信息" :visible.sync="dialogTableVisible4add" @close="resetForm('addForm')">
        <el-form :model="saveUser" ref="addForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="员工姓名" prop="username">
                <el-input v-model="saveUser.username"></el-input>
            </el-form-item>
            <el-form-item label="员工密码" prop="password">
                <el-input type="password" v-model="saveUser.password"></el-input>
            </el-form-item>
            <el-form-item label="员工评论" prop="remark">
                <el-input v-model="saveUser.remark"></el-input>
            </el-form-item>
            <el-form-item label="员工邮箱" prop="email">
                <el-input v-model="saveUser.email"></el-input>
            </el-form-item>
            <el-form-item align="right">
                <el-button type="primary" @click="save()">添加</el-button>
                <el-button @click="resetForm('addForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog title="编辑员工信息" :visible.sync="dialogTableVisible4edit" @close="resetForm('editForm')">
        <el-form :model="editUser" ref="editForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="员工姓名" prop="username">
                <el-input v-model="editUser.username"></el-input>
            </el-form-item>
            <el-form-item label="员工密码" prop="password">
                <el-input type="password" v-model="editUser.password"></el-input>
            </el-form-item>
            <el-form-item label="员工评论" prop="remark">
                <el-input v-model="editUser.remark"></el-input>
            </el-form-item>
            <el-form-item label="员工邮箱" prop="email">
                <el-input v-model="editUser.email"></el-input>
            </el-form-item>
            <el-form-item align="right">
                <el-button type="warning" @click="updateUser()">修改</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</div>
</body>
<script>
    new Vue({
        el: "#div",
        data: {
            dialogTableVisible4add: false,  //添加窗口显示状态
            dialogTableVisible4edit: false, //编辑窗口显示状态
            saveUser: {},//添加用户的数据
            editUser: {},//编辑用户的数据
            tableData: [ //表格数据
                {
                    id: 1,
                    username: "张三",
                    password: '333',
                    remark: '性情中人',
                    email: "zs@qq.com"
                },
            ],
            pagination: { // 分页对象
                currentPage: 1, //当前页
                pageSize: 5,    //每页显示条数
                total: 10        //总条数
            },
        },
        methods: {
            handleSizeChange(pageSize) {  //改变每页条数时执行的函数
                //修改分页查询的参数
                this.pagination.pageSize = pageSize;
                //重新执行查询
                this.findByPage();
            },
            handleCurrentChange(pageNum) {  //改变页码时执行的函数
                //修改分页查询的参数
                this.pagination.currentPage = pageNum;
                //重新执行查询
                this.findByPage();
            },

            showsaveUser() { // 打开新增窗口
                this.dialogTableVisible4add = true;
                this.saveUser = {}; // 清空原有数据
            },
            resetForm(addForm) {
                //双向绑定，输入的数据都赋值给了saveUser， 清空saveUser数据
                this.saveUser = {};
            },

            showEditUser(row) { // 打开员工修改窗口
                //1. 弹出窗口
                this.dialogTableVisible4edit = true;
                //2. 显示表单数据
                this.editUser = row;
            },
            findByPage() { // 分页查询
                axios.get('/UserServlet?action=findByPage', {
                    params: {
                        pageNum: this.pagination.currentPage,
                        pageSize: this.pagination.pageSize
                    }
                }).then(resp => {
                    // 设置总记录数
                    this.pagination.total = resp.data.total;
                    // 设置list集合
                    this.tableData = resp.data.list;
                })
            },
            save() { // 添加用户
                axios.post('/UserServlet?action=save', this.saveUser).then(resp => {
                    this.dialogTableVisible4add = false; // 关闭添加对话框
                    this.findByPage(); // 重新查询
                    this.saveUser = {}; // 清空原有数据
                })
            },
            updateUser() { // 修改用户
                axios.put('/UserServlet?action=update', this.editUser).then(resp => {
                    this.dialogTableVisible4edit = false; // 关闭修改对话框
                    this.findByPage(); // 重新查询
                    this.editUser = {}; // 清空原有数据
                })
            },
            deleteUser(id) { // 删除用户
                this.$confirm('确认删除？')
                    .then(_ => {
                        // 发送异步请求
                        axios.delete('/UserServlet?action=delete&id=' + id).then(resp => {
                            if (resp.data == 'ok') {
                                // 获得删除后的总页数
                                let newPages = Math.ceil((this.pagination.total - 1) / this.pagination.pageSize);
                                // 如果当前页大于总页数，修正
                                this.pagination.currentPage > newPages ? this.pagination.currentPage = newPages : this.pagination.currentPage;
                                // 如果当前页小于1，修正
                                this.pagination.currentPage < 1 ? this.pagination.currentPage = 1 : this.pagination.currentPage;
                                this.findByPage(); // 重新查询
                            }
                        })
                    })
            }

        },
        created() {
            this.findByPage();
        }
    })
    ;
</script>
</html>